<template>
    <div class="body">
      <div class="demo-nav">
        <div class="demo-nav__title">代金券</div>
        <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
          <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
        </svg>
      </div>
      <div class="container">
        <div class="coupon-list">
          <div class="sawtooth-bor item" v-for="coupon in couponList" :key="coupon.couponId">
            <div class="pt10 discount" style="padding-top: 10px;">
              <div class="fs12">{{coupon.shopsName}}</div>
              <div class="fs12">满{{coupon.couponPriceMost}}减{{coupon.couponPrice}}</div>
              <div class="fs12">有效期{{coupon.modifiedTime}} - {{coupon.couponTime}}</div>
            </div>
            <div class="textc receive" @click="toSupplier(coupon.supplierId)">立即使用</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

  import { selectCustomerCoupon } from '@/api/customer/customer.js'

  export default {
    name: "my_vouchers",
    data(){
      return{
        couponList: [],
      }
    },
    created(){
      this.getList();
    },
    methods: {
      //返回上一层
      toBack(){
        this.$router.go(-1);
      },
      // 查询优惠券列表
      getList(){
        selectCustomerCoupon().then((res) =>{
          console.log(res.data.data);
          this.couponList = res.data.data
        })
      },
      // 去使用
      toSupplier(supplierId){
        this.$router.push({path:"/shop_home",query:{ shopId:supplierId }});
      },
    },
  }
</script>

<style scoped>
  .body{
    width: 100%;
    min-height: 100%;
  }
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 45px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 12px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .coupon-list {
    width: 370px;
    margin: 0 auto;
  }

  .coupon-list .item:first-child {
    margin-top: 20px;
  }

  .coupon-list .item {
    width: 370px;
    height: 90px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  /* 第一个 */
  .sawtooth-bor {
    display: flex;
    color: #fff;
    padding-left: 0.5rem;
    box-sizing: border-box;
    /* 画出一个半径为8rpx的透明的圆，透明圆以外都是#ffb937颜色 */
    background: radial-gradient(transparent 0, transparent 8px, #F35C3B 8px);
    /* 截取上面生成的渐变图的一部分，相当于截取30rpx的正方形中有一个直径10px的透明圆点 */
    background-size: 30px 28px;
    /* 根据优惠券div大小进行微调 */
    background-position: 16px 0px;
    background-color: #fff;
    position: relative;
  }

  .sawtooth-bor:before {
    content: ' ';
    display: block;
    /* 用相同的颜色覆盖 */
    background-color: #F35C3B;
    /* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
    position: absolute;
    top: 0;
    bottom: 0;
    /* 为锯齿保留的距离 */
    left: 20px;
    right: 20px;
    z-index: -1;
  }

  .discount {
    border-right: 2px dashed #f5f5f5;
    padding: 10px;
    flex: 1;
    box-sizing: border-box;
    background-color: #F35C3B;
  }

  .receive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffb937;
  }
</style>
